<%@ page contentType="text/html;charset=UTF-8" language="java"%>

<html>
<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"/>
</head>

<body>



<div class="layui-container-fluid">
    <div class="layui-row">
        <div class="layui-col-xs2">
            <div id="companyTree"></div>
        </div>
        <div class="layui-col-xs10">
            <button type="button" class="layui-btn" id="addBtn">
                <i class="layui-icon">&#xe608;</i> 添加
            </button>
            <table id="demo" lay-filter="test"></table>
        </div>
    </div>
</div>

<form id="addForm" class="layui-form" style="display:none;padding:10px 20px 0px 0px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">图片名字</label>
        <div class="layui-input-block">
            <input type="text" name="bannerOldName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="text" name="bannerState" lay-verify="number" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">图片描述</label>
        <div class="layui-input-block">
            <input type="text" name="bannerDescription" lay-verify="number" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">法师头像</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="addLogo">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
    </div>
    <input type="hidden" name="bannerImageUrl" id="addPic" value=""/>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addEms">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>


<form id="updateForm" layui-filter="updateForm" class="layui-form" style="display:none;padding:10px 20px 0px 0px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <input type="hidden" name="bannerId"  value=""/>
    <div class="layui-form-item">
        <label class="layui-form-label">图片名字</label>
        <div class="layui-input-block">
            <input type="text" name="bannerOldName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上传时间</label>
        <div class="layui-input-block">
            <input type="text" name="bannerDate" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="text" name="bannerState" lay-verify="number" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">图片描述</label>
        <div class="layui-input-block">
            <input type="text" name="bannerDescription" lay-verify="number" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">法师头像</label>
        <div class="layui-input-block">
            <img class="layui-upload-img" width="100px" height="80px" id="aftershow"/>
            <button type="button" class="layui-btn" id="updateLogo">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
    </div>
    <!--input type="hidden" name="logo" id="uplogo" value=""/-->
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addEms">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>




<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>

<script type="text/javascript">
    layui.use(["table","form","layer","laydate","upload"],function(){
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var upload = layui.upload;
        table.render({
            elem: "#demo"
            ,url: "${pageContext.request.contextPath}/banner/banners"
            ,page: true
            ,limit: 3
            ,limits: [3,6,7,9]
            ,cols:[[
                {field: 'bannerId',title: '图片ID'}
                ,{field: 'bannerOldName',title:'图片名字'}
                ,{field: 'bannerState',title:'图片状态'}
                ,{field: 'bannerDate',title:'上传时间'}
                ,{field: 'bannerDescription',title:'图片描述'}
                ,{field: 'bannerImageUrl', title: '图片显示',templet:function(d){
                        return "<img src='${pageContext.request.contextPath}"+d.bannerImageUrl+"' height='100'/>";
                    }}
                ,{title:"操作", width:300, align:'center', toolbar: '#barDemo'}
            ]]
        })

        table.on("tool(test)",function(obj){
            var data=obj.data;
            var layEvent=obj.event;
            if(layEvent === 'del'){ //删除
                layer.confirm('是否确认删除？',function(index){
                    $.ajax({
                        url:"${pageContext.request.contextPath}/banner/delete",
                        data:"id="+data.bannerId,
                        dataType:"json",
                        success:function(data){
                            //提示删除成功，刷新表格
                            layer.msg("删除成功");
                            table.reload("demo");
                        }
                    });
                    layer.close(index);
                });

            } else if(layEvent === 'edit'){ //编辑
                //1.根据data获取到数据
                //2.把数据回显修改的form表单中。
                form.val("updateForm",data);
                //3.把form放入到弹出层展示出来。
                layer.open({
                    type:1,
                    area: ['500px', '500px'],
                    title:"修改图片信息",
                    content:$("#updateForm")
                });
            }
        })
        //给添加按钮追加点击事件
        $("#addBtn").click(function(){
            layer.open({
                type:1,
                title:"添加图片",
                content:$("#addForm")
            })
        })
        //文件上传
        upload.render({
            elem: '#addLogo' //绑定元素
            ,url: '${pageContext.request.contextPath}/banner/upload' //上传接口
            ,done: function(res){
                //上传完毕回调,需要把上传到服务器的文件名放到form表单里面。
                $("#addPic").val(res.msg);
            }
        });
        form.on("submit(addEms)", function(data){
            //发出ajax请求，往数据库里面存储数据---开始
            $.ajax({
                url:"${pageContext.request.contextPath}/banner/add",
                data:data.field,
                dataType:"json",
                type:"get",
                success:function(res){
                    if(res.code==0){
                        //关闭弹出层
                        layer.closeAll();
                        layer.msg("添加成功！");
                        //刷新table表格
                        table.reload("demo");
                    }
                }
            });
            //发出ajax请求，往数据库里面存储数据---结束
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });



    })
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>

</html>